<div class="live-page">
	<div class="dist-banner">
		<div class="full-dist">
			<div class="done-dist{if $node.data_map.prosent.data_int|lt(20)} less{/if}" style="width:{$node.data_map.prosent.data_int}%">
				<div class="progress">
					<div class="prog-info">
						<strong>Lead position</strong>
						{$node.data_map.prosent.data_int}% of race
					</div>
				</div>
			</div>
		</div>
		<div class="info">
		<h1>{attribute_view_gui attribute=$node.data_map.name}</h1>
		{include uri="design:parts/clock.tpl"}
		
		</div>
	</div>
	<div class="holder">
		<div class="results">
			<p><strong class="emf">LIVE Results</strong> Powered by {if $node.data_map.external_live.has_content}<a href="{$node.data_map.external_live.content}" rel="external">{/if}Topptid.no{if $node.data_map.external_live.has_content}</a>{/if} (updated every 5 minutes) {if $node.data_map.url.has_content}<a href="#" class="expand" title="Expand/collapse table">Expand</a><a href="#" class="reload" title="Reload the table">Reload</a>{/if}</p>
			{if $node.data_map.url.has_content}
			<div id="table">
				<div class="loading">Loading</div>
			</div>
			<script type="text/javascript">
			var data_url = '{$node.data_map.url.content}';
			var loading = $("#table").html();
			{literal}
			function displayValue(arr, key, fallback) {
				if(arr[key]) {
					return '<td>'+arr[key]+'</td>';
				} else {
					if(fallback) {
						return '<td>'+fallback+'</td>';
					} else {
						return '<td>&nbsp;</td>';
					}
				}
			}
			function fetch_data() {
				$('#table').html(loading);
				$.getJSON(data_url, function(data) {
					if(!data ) {
						$('#table').html('<p>No data yet</>');
						return;
					}
					if(data.error) {
						$('#table').html('<p>'+data.error+'</>');
						return;
					}
					var items = [];
					items.push('<tr><th>#</th><th>Name</th><th>Swim</th><th>T1</th><th>Dyranut</th><th>Geilo</th><th>Imingfjell</th><th>Cycle</th><th>T2</th><th>ZombieHill</th><th>Run</th><th>Total</th></tr>');
					  $.each(data, function(key, val) {
						var row = '<tr>';
						row+=displayValue(val,'number');
						row+=displayValue(val, 'name', '(Unknown)');
						row+=displayValue(val,'Swim');
						row+=displayValue(val,'T1');
						row+=displayValue(val,'Dyranut');
						row+=displayValue(val,'Geilo');
						row+=displayValue(val,'Imingfjell');
						row+=displayValue(val,'Cycle');
						row+=displayValue(val,'T2');
						row+=displayValue(val,'ZombieHill');
						row+=displayValue(val,'Run');
						row+=displayValue(val,'Finish');
						row+='</tr>';
					    items.push(row);
					});
					$('#table').html('<table>'+items.join('')+'</table>');
				});
				return false;
			}
				jQuery(document).ready(function() {
					fetch_data();
					var results = $('.results'),
						sidebar = $('.feed'),
						holder = results.parent(),
						orgWidthSidebar = sidebar.width(),
						orgWidthResults = results.width();
					$('.reload').click(fetch_data);

					$('.expand').toggle(function(e){
						var me = $(this);
						sidebar.stop().animate({
							opacity: 0.25,
							width: '1'
						}, 1000,function(){sidebar.hide()});
						results.stop().animate({
							width: holder.width()
						}, 1000,function(){me.addClass('expanded')});
					},function(e){
						var me = $(this);
						sidebar.show().stop().animate({
							opacity: 1,
							width: orgWidthSidebar
						}, 1000);
						results.stop().animate({
							width: orgWidthResults
						}, 1000,function(){me.removeClass('expanded')});
					})
				});
			{/literal}
			</script>
			{/if}
			{attribute_view_gui attribute=$node.data_map.text}
		</div>
		<div class="feed">
			<p><strong class="emf">LIVE Chat</strong> Join by #nxtri hashtag</p>
			{$node.data_map.embed.content}
		</div>
	</div>
</div>